<template>
  <el-container>
    <app-navbar></app-navbar>
    <el-header>
      <h1>{{ restaurant.name }}</h1>
    </el-header>
    <el-main>
      <el-card>
        <img :src="restaurant.image" alt="餐厅图片" />
        <div class="detail-content">
          <h3>菜品列表</h3>
          <el-table :data="restaurant.dishes" style="width: 100%">
            <el-table-column prop="name" label="菜品名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="image" label="图片">
              <template #default="scope">
                <img :src="scope.row.image" alt="菜品图片" style="width: 50px; height: 50px;" />
              </template>
            </el-table-column>
          </el-table>
          <h3>用户评分与评价</h3>
          <p>评分: {{ restaurant.rating }}</p>
          <el-rate v-model="restaurant.rating" disabled />
          <el-button type="primary">添加评论</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      restaurant: {
        name: '餐厅A',
        image: require('../assets/images/restaurantA.jpg'),
        rating: 4.5,
        dishes: [
          { name: '菜品1', price: '30', image: require('../assets/images/dish1.jpg') },
          { name: '菜品2', price: '50', image: require('../assets/images/dish2.jpg') },
        ],
      },
    };
  },
};
</script>

<style scoped>
.detail-content {
  padding: 20px;
}
</style>